<template>
    <div id="text-detail-box" ref="refsSearchTextDetailComponentBox">
        <div id="text-area-margin">
            <div id="text-area-button-group">
                <el-button :disabled="textContentView.upDisable" class="text-button" @click="textContentView.upSection()" size="small"
                    link>
                    <el-icon :size="24">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            viewBox="0 0 24 24">
                            <g fill="none">
                                <path
                                    d="M4.284 10.295a1 1 0 0 0 1.424 1.404L11 6.329v13.67a1 1 0 1 0 2 0V6.335l5.285 5.364a1 1 0 0 0 1.424-1.404L12.887 3.37a1.25 1.25 0 0 0-1.78 0l-6.823 6.924z"
                                    fill="currentColor"></path>
                            </g>
                        </svg>
                    </el-icon>
                </el-button>
                <el-button :disabled="textContentView.subindexList.length === 0" class="text-button"
                    @click="textContentView.switchSectionDrawer(true)" size="small" link>
                    <el-icon :size="24">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            viewBox="0 0 24 24">
                            <path
                                d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5s1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5S5.5 6.83 5.5 6S4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5s1.5-.68 1.5-1.5s-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"
                                fill="currentColor"></path>
                        </svg>
                    </el-icon>
                </el-button>
                <el-button :disabled="textContentView.nextDisable" class="text-button" @click="textContentView.nextSection()"
                    size="small" link>
                    <el-icon :size="24">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            viewBox="0 0 24 24">
                            <g fill="none">
                                <path
                                    d="M19.716 13.704a1 1 0 0 0-1.425-1.403l-5.29 5.37V4a1 1 0 1 0-2 0v13.665L5.714 12.3a1 1 0 0 0-1.424 1.403l6.822 6.925a1.25 1.25 0 0 0 1.78 0l6.823-6.925z"
                                    fill="currentColor"></path>
                            </g>
                        </svg>
                    </el-icon>
                </el-button>
                <el-button class="text-button" @click="textContentView.switchEdit(true)" size="small" link>
                    <el-icon :size="24">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            viewBox="0 0 24 24">
                            <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <path d="M9 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-3"></path>
                                <path d="M9 15h3l8.5-8.5a1.5 1.5 0 0 0-3-3L9 12v3"></path>
                                <path d="M16 5l3 3"></path>
                            </g>
                        </svg>
                    </el-icon>
                </el-button>
            </div>
            <div id="text-area" :style="`height:${mainHeight}px`">
                <template v-if="textContentView.subindexList.length > 0">
                    <p id="text-title">
                        {{ textContentView.subindexList[Number(textContentView.currentSection)].title }}
                    </p>
                    <span id="text-content">
                        {{ textContentView.subindexList[Number(textContentView.currentSection)].description }}
                    </span>
                </template>
                <template v-else>
                    <p id="text-title">
                        {{ textContentView.index.title }}
                    </p>
                    <span id="text-content">
                        {{ textContentView.index.description }}
                    </span>
                </template>
            </div>
        </div>
        <el-drawer 
            class="text-section-drawer" 
            :model-value="textContentView.drawer" 
            direction="ltr" 
            :show-close="false"
            @close="textContentView.switchSectionDrawer(false)"
        >
            <template #header>
                <h1 style="margin: 0 !important; ">{{ textContentView.index.title }}</h1>
            </template>
            <template #default>
                <el-menu
                    @select="textContentView.selectSection($event)"
                    :default-active="textContentView.currentSection" 
                    class="text-section-menu"
                >
                    <template v-for="(subindex, index) in textContentView.subindexList" :key="index">
                        <el-menu-item :index="`${index}`">
                            <div style="width: 100%;"><span>{{ subindex.title }}</span></div>
                        </el-menu-item>
                    </template>
                </el-menu>
            </template>
        </el-drawer>
        <el-dialog class="edit-dialog" :model-value="textContentView.textEdit" @close="textContentView.switchEdit(false)"  :show-close="false">
            <template #header>
                <div style="display: flex; align-items: center; justify-content: flex-end;margin-bottom: 5px;">
                    <el-button  type="info" plain size="small" @click="textContentView.resetTextarea()">
                        重置
                    </el-button>
                    <el-button  type="primary" plain size="small" @click="handleTextareaSubmit">
                        提交
                    </el-button>
                </div>
            </template>
            
            <el-input 
                style="height: 100%;" 
                :model-value="textContentView.textarea"
                @input="textContentView.inputTextarea($event)"
                autosize 
                type="textarea"
                placeholder="" 
            />

        </el-dialog>
    </div>
</template>

<script>
import { TextContentView } from '@/views/index.js'
export default {
    beforeUpdate() {/**/ },
    beforeCreate() {/**/ },
    beforeMount() {
        this.$nextTick(() => {
            // 根据浏览器高度设置初始高度
            this.mainHeight = document.body.offsetHeight
                - 34
                - 36
                - 24
            // 监听浏览器高度变化，修改表格高度
            window.addEventListener('resize', () => {
                this.mainHeight = document.body.offsetHeight
                    - 34
                    - 36
                    - 24
            })
        })
    },
    props: {
        textContentView: {
            type: TextContentView,
            default: TextContentView.defaultView
        }
    },
    methods: {
        handleTextareaSubmit(){
            if(this.textContentView.subindexList.length > 0){
                if(this.textContentView.subindexList[Number(this.textContentView.currentSection)].description !== this.textContentView.textarea && this.textContentView.textarea){
                    this.$emit('text-detail:patch:description')
                    this.textContentView.switchEdit(false)
                }
            }else {
                if(this.textContentView.index.description !== this.textContentView.textarea && this.textContentView.textarea){
                    this.$emit('text-detail:patch:description')
                    this.textContentView.switchEdit(false)
                }
            }
        }
    },
    data() {
        return {
            mainHeight: 0,
        }
    }
}
</script>

<style>
#text-detail-box {
    background-color: #252526;
    height: 100%;
}

.text-section-drawer {
    width: auto !important;
}

.text-section-drawer .el-drawer__header {
    margin: 0 !important;
}

.text-section-menu {
    --el-menu-item-height: 40px !important;
}

#text-area-margin {
    height: 100%;
    display: flex;
    align-items: flex-start;
}

#text-area-button-group {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#text-area {
    width: 100%;
    padding-right: 45px;
    padding-left: 45px;
    background-color: #1E1E1E;
    overflow-y: scroll;
    line-height: 32px;
    font-size: 18px;
}

#text-content {
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-color: #CE9178;
    text-underline-offset: 35%;
    color: #6A9955;
}

#text-title {
    font-size: 21px;
    color: #0DBB78;
}

.text-button.el-button+.el-button {
    margin: 0px !important;
}

.edit-dialog {
    width: 100% !important;
}

.edit-dialog .el-dialog__header,
.edit-dialog .el-dialog__body {
    margin: 0 !important;
    padding: 0 !important;
}</style>